<template>
  <div class="container">
    <div class="content-center">
        <h1>会议室预约系统</h1>
        <p>欢迎使用我们的会议室预约系统。您可以在此预约会议室，查看已预约的会议室信息。</p>
        <a href="http://localhost/reservation/room" class="btn">预约会议室</a>
        <a href="http://localhost/calendar" class="btn">查看预约信息</a>
    </div>

    <div class="main2">
        <h2>通知公告</h2>
        <el-collapse accordion v-model="active">
            <el-collapse-item :name="index" v-for="(item ,index) in notices" :key="item.id">
                <template slot="title">
                    <b>{{"公告"}}</b>
                    <b>{{"："}}</b>
                    <b>{{ item.noticeTitle }}</b>
                    <span style="margin-left: 50px; color: #888">{{ item.createTime }}</span>
                </template>
                <div style="padding: 0 20px">{{ item.noticeContent }}</div>
            </el-collapse-item>
        </el-collapse>
    </div>
</div>
</template>

<script>
import { listNotice, getNotice, delNotice, addNotice, updateNotice } from "@/api/system/notice";
export default {
  name: "Index",
  data() {
    return {
      // 版本号
      version: "3.8.7",
      notices: [],
      active: 0,
      user: {},
    };
  },
  created(){
    this.getList();
  },
  methods: {
    goTarget(href) {
      window.open(href, "_blank");
    },
    /** 查询公告列表 */
    getList() {
      listNotice(this.queryParams).then(response => {
        this.notices = response.rows;
        console.log(this.notices)
      });
    },
  }
};
</script>

<style scoped lang="scss">
.container {
    max-width: 1500px; /* 设置最大宽度 */
    margin: 0 auto; /* 水平居中容器 */
    padding: 0 20px; /* 两侧添加一些填充 */
    display: flex; /* 使用 Flex 布局 */
    flex-direction: row; /* 水平排列 */
    justify-content: space-between; /* 水平空间平均分配 */

    .content-center {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center; /* 文字水平居中 */
    }
    .btn {
        display: inline-block;
        margin-right: 10px;
        margin-bottom: 10px;
        padding: 10px 20px;
        font-size: 16px;
        font-weight: 600;
        text-decoration: none;
        color: #fff;
        background-color: #007bff;
        border: 1px solid #007bff;
        border-radius: 4px;
        cursor: pointer;

        &:hover {
            background-color: #0056b3;
            border-color: #0056b3;
        }
    }
    .main2 {
        width: 100%; /* Full width */
        max-width: 600px; /* Limit width if needed */
        background-color: #f9f9f9;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
        margin-left: auto; /* 靠右侧显示 */

        h2 {
            font-size: 20px;
            margin-bottom: 15px;
        }

        .el-collapse-item {
            border: none;
            border-bottom: 1px solid #ddd;

            &:last-child {
                border-bottom: none;
            }

            .el-collapse-item__header {
                padding: 10px 0;

                .el-collapse-item__arrow {
                    color: #007bff;
                }
            }

            .el-collapse-item__content {
                padding: 10px 0;
            }
        }
    }
}
</style>